<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主播数据管理平台</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 先引入 Vue -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    
    <!-- 引入 http-vue-loader -->
    <script src="https://unpkg.com/http-vue-loader"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        * {
            margin:0;
            padding:0;
        }
        /* 主体 */
        .home_box{
            height: 100vh;
        }
        /* 头部标题栏 */
        .el-header{
            width: 100%;
            background:#a0cfff;
            display: flex;
            justify-content: space-between;
            color: #fff;
            align-items: center;
            padding: 0 10px;
        }
        .el-header div{
            display: flex;
            align-items: center;
        }
        .el-header div span{
            margin-left: 20px;
        }
        .el-header div img{
            width: 60px;
        }
        .el-dropdown {
            vertical-align: top;
        }
        .el-header div .el-avatar img{
            width: 30px;
        }
        .el-header .el-avatar {
            margin-right: 10px;
        }
        .el-icon-arrow-down {
            font-size: 12px;
        }
        .usersetting {
            padding-left: 5px;
        }
        /* 侧边栏 */
        .el-aside{
            background-color:#a0cfff;
        }
        .el-aside .el-menu{
            border-right: none;
        }
        .el-menu a {
            text-decoration: none;
            color: whitesmoke;
            font-size: 16px;
        }
        /* 内容区 */
        .card-content {
            display: flex;
        }
        .data-card {
            margin-right: 20px;
            flex: 9;
        }
        .msg-card {
            flex: 2;
        }
        .task-card a{
            text-decoration: none;
            color: #a0cfff;
        }
        .box-card {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container class="home_box">
            <el-header>
              <div>
                <img src="../../static/img/logo.png" alt="">
                <span>XX公司直播数据管理系统</span>
              </div>
              <div>
                <el-avatar :size="30" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
                <el-dropdown>
                  <el-button type="warning" class="usersetting">
                      小明<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>账号设置</el-dropdown-item>
                    <el-dropdown-item>退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </el-header>
            <el-container>
              <el-aside width="170px">
                <el-menu>
                    <el-row>
                        <el-col :span="24">
                          <el-menu
                            default-active="1"
                            class="el-menu-vertical-demo"
                            background-color="#e6a23c"
                            text-color="white"
                            active-text-color="#a0cfff">
                            <el-menu-item index="1" @click="toUsers">
                                <i class="el-icon-location"></i>
                                <span slot="title">工作台</span>
                              </el-menu-item>
                            <el-menu-item index="2" @click="toAnchors">
                              <i class="el-icon-menu"></i>
                              <span slot="title">主播管理</span>
                            </el-menu-item>
                            <el-menu-item index="3" @click="toData">
                              <i class="el-icon-document"></i>
                              <span slot="title">数据中心</span>
                            </el-menu-item>
                            <el-menu-item index="4" @click="toTask">
                              <i class="el-icon-setting"></i>
                              <span slot="title">任务管理</span>
                            </el-menu-item>
                          </el-menu>
                        </el-col>
                    </el-row>
                </el-menu>
              </el-aside>
              <el-main>
                <span>XX公司</span>
                <div class="card-content">
                    <!--   数据展示区  -->
                    <div class="data-card">
                        <el-card class="box-card turnoverData">
                            <div slot="header" class="clearfix">
                                <span>流水数据</span>
                            </div>
                            <div>
                                <el-table
                                :data="tableData"
                                stripe
                                style="width: 100%">
                                    <el-table-column
                                    prop="date"
                                    label="日期"
                                    width="120">
                                    </el-table-column>
                                    <el-table-column
                                    prop="nickname"
                                    label="主播昵称"
                                    width="100">
                                    </el-table-column>
                                    <el-table-column
                                    prop="turnover"
                                    label="流水">
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-card>
                        <el-card class="box-card operateData">
                            <div slot="header" class="clearfix">
                                <span>运营数据</span>
                            </div>
                            <div>
                                <el-table
                                :data="tableData"
                                stripe
                                style="width: 100%">
                                    <el-table-column
                                    prop="date"
                                    label="日期"
                                    width="120">
                                    </el-table-column>
                                    <el-table-column
                                    prop="nickname"
                                    label="主播昵称"
                                    width="100">
                                    </el-table-column>
                                    <el-table-column
                                    prop="turnover"
                                    label="流水">
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-card>
                        <el-card class="box-card operateData">
                            <div slot="header" class="clearfix">
                                <span>排行榜</span>
                            </div>
                            <div>
                                <el-table
                                :data="tableData"
                                stripe
                                style="width: 100%">
                                    <el-table-column
                                    prop="date"
                                    label="日期"
                                    width="120">
                                    </el-table-column>
                                    <el-table-column
                                    prop="nickname"
                                    label="主播昵称"
                                    width="100">
                                    </el-table-column>
                                    <el-table-column
                                    prop="turnover"
                                    label="流水">
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-card>
                    </div>

                    <div class="msg-card">
                        <el-card class="box-card announcement-card">
                            <div slot="header" class="clearfix">
                                <span>公告</span>
                                <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
                            </div>
                            <div v-for="o in 4" :key="o" class="text item">
                                {{'列表内容 ' + o }}
                            </div>
                        </el-card>
                        <el-card class="task-card box-card">
                            <div class="clearfix">
                                <span>任务</span>
                                <el-button style="float: right; padding: 3px 0" type="text" @click="toTask">
                                    查看详情
                                </el-button>
                            </div>
                        </el-card>
                    </div>
                </div>
              </el-main>
            </el-container>
          </el-container>
    </div>
</body>
<script>
    Vue.use(httpVueLoader);
    new Vue({
        el: '#app',
        data () {
            return {
                tableData: [{
                        date: '2020-05-02',
                        nickname: '皮蛋',
                        turnover: 1231654654
                    }, {
                        date: '2020-06-02',
                        nickname: '闲蛋',
                        turnover: 12354
                    }, {
                        date: '2020-07-02',
                        nickname: '皮皮',
                        turnover: 654
                    }, {
                        date: '2020-08-02',
                        nickname: '皮蛋丹丹丹丹',
                        turnover: 126
                }]
            }
        },
        methods: {
            toUsers () {
                window.location.href = "/user/index"
            },
            toAnchors () {
                window.location.href = "/user/anchors"
            },
            toData () {
                window.location.href = "/user/data"
            },
            toTask () {
                window.location.href = "/user/tasks"
            }
        }
    })
</script>
</html>